<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        #main {
            width: 90vw;
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="main"></div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));

    let option = {
        backgroundColor: '#0A2E5D',
        normal: {
            top: 200,
            left: 300,
            width: 500,
            height: 400,
            zIndex: 6,
            backgroundColor: ""
        },
        color: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
        title: {
            show: true,
            text: "公司能力分析",
            left: "40%",
            top: "1%",
            textStyle: {
                fontSize: 18,
                color: "#fff",
                fontStyle: "normal",
                fontWeight: "normal"
            }
        },
        tooltip: {
            show: true,
            trigger: "item"
        },
        legend: {
            show: true,
            icon: "circle",
            left: "35%",
            top: "90%",
            orient: "horizontal",
            textStyle: {
                fontSize: 14,
                color: "#fff"
            }
            ,data: ["A", "B"]
        },
        radar: {
            center: ["50%", "50%"],
            radius: "70%",
            startAngle: 90,
            splitNumber: 4,
            shape: "circle",
            splitArea: {
                areaStyle: {
                    color: ["transparent"]
                }
            },
            "axisLabel": {
                show: false,
                fontSize: 18,
                color: "#fff",
                fontStyle: "normal",
                fontWeight: "normal"
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "white"//
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "white"//
                }
            },
            indicator: [
                <#list indicators as indicator>
                {
                    name: '${indicator.name}',
                    min: ${indicator.min},
                    max: ${indicator.max}
                },
                </#list>
            ]
        },
        series: [{
            name: "A",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            areaStyle: {
                normal: {
                    color: "rgba(245, 166, 35, 0.4)"
                }
            },
            itemStyle:{
                color:'rgba(245, 166, 35, 1)',
                borderColor:'rgba(245, 166, 35, 0.3)',
                borderWidth:10,
            },
            lineStyle: {
                normal: {
                    type: "dashed",
                    color: "rgba(245, 166, 35, 1)",
                    width: 2
                }
            },
            data: [
                [
                    <#list datasA as data>
                        ${data?c},
                    </#list>
                ]
            ]
        }, {
            name: "B",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
                normal: {
                    color:'rgba(19, 173, 255, 1)',
                    borderColor: "rgba(19, 173, 255, 0.4)",
                    borderWidth: 10
                }
            },
            areaStyle: {
                normal: {
                    color: "rgba(19, 173, 255, 0.5)"
                }
            },
            lineStyle: {
                normal: {
                    color: "rgba(19, 173, 255, 1)",
                    width: 2,
                    type: "dashed"
                }
            },
            data: [
                [
                    <#list datasB as data>
                        ${data?c},
                    </#list>
                ]
            ]
        }]
    };
    myChart.setOption(option);
</script>
